<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>router</title>
</head>
<body>
  <ul>
    <li><a href="#/">turn yellow</a></li>
    <li><a href="#/blue">turn blue</a></li>
    <li><a href="#/green">turn green</a></li>
  </ul>
  <button id='button2'>back</button>
</body>
<script>
  const button2 = document.querySelector('#button2');
  const content = document.querySelector('body');
  const ul = document.querySelector('ul');
  function changeBgColor(color) {
    content.style.backgroundColor = color;
  }
  // router1
  class Routers1 {
      constructor() {
        // 储存hash与callback键值对
        this.routes = {};
        // 当前hash
        this.currentUrl = '';
        // 记录出现过的hash
        this.history = [];
        // 作为指针,默认指向this.history的末尾,根据后退前进指向history中不同的hash
        this.currentIndex = this.history.length - 1;
        this.refresh = this.refresh.bind(this);
        this.backOff = this.backOff.bind(this);
        window.addEventListener('load', this.refresh, false);
        window.addEventListener('hashchange', this.refresh, false);
      }

      route(path, callback) {
        this.routes[path] = callback || function () { };
      }

      refresh() {
        this.currentUrl = location.hash.slice(1) || '/';
        // 将当前hash路由推入数组储存
        this.history.push(this.currentUrl);
        // 指针向前移动
        this.currentIndex++;
        this.routes[this.currentUrl]();
      }
      // 后退功能
      backOff() {
        // 如果指针小于0的话就不存在对应hash路由了,因此锁定指针为0即可
        this.currentIndex <= 0
        ? (this.currentIndex = 0)
        : (this.currentIndex = this.currentIndex - 1);
        // 随着后退,location.hash也应该随之变化
        location.hash = `#${this.history[this.currentIndex]}`;
        // 执行指针目前指向hash路由对应的callback
        this.routes[this.history[this.currentIndex]]();
        console.log(this.routes, location.hash )
      }
    }
    window.Router = new Routers1();
    
    button2.addEventListener('click', Router.backOff, false);

    Router.route('/', function () {
      changeBgColor('yellow');
    });
    Router.route('/blue', function () {
      changeBgColor('blue');
    });
    Router.route('/green', function () {
      changeBgColor('green');
    });

    // router2
    class Routers {
      constructor() {
        this.routes = {};
        this._bindPopState();
      }
      init(path) {
        history.replaceState({ path: path }, null, path);
        this.routes[path] && this.routes[path]();
      }

      route(path, callback) {
        this.routes[path] = callback || function () { };
      }

      go(path) {
        console.log('go', path)
        history.pushState({ path: path }, null, path);
        this.routes[path] && this.routes[path]();
      }
      _bindPopState() {
        window.addEventListener('popstate', e => {
          const path = e.state && e.state.path;
          console.log('popstate', path)
          this.routes[path] && this.routes[path]();
        });
      }
    }

    window.Router = new Routers();
    Router.init(location.pathname);

    Router.route('#/', function () {
      changeBgColor('yellow');
    });
    Router.route('#/blue', function () {
      changeBgColor('blue');
    });
    Router.route('#/green', function () {
      changeBgColor('green');
    });

    ul.addEventListener('click', e => {
      if (e.target.tagName === 'A') {
        e.preventDefault();
        Router.go(e.target.getAttribute('href'));
      }
    });

    button2.addEventListener('click', () => history.back());

</script>
</html>